<template>
  <div>
    <div class="orderDetails">
      <h3>订单信息</h3>
      <div class="orderDetails_header">
        <div class="orderDetails_header_left">
          <div>
            <p>订单编号: {{ order.orderCode }}</p>
            <p>客户姓名: {{ order.consigneeName }}</p>
            <p>客户电话: {{ order.consigneePhone }}</p>
            <p>
              收货地址: {{ order.proviceName }}{{ order.cityName
              }}{{ order.countyName }}{{ order.consigneeAddress }}
            </p>
            <p>付款方式: {{ order.paymentWay == 1 ? "支付宝" : "" }}</p>
            <p>商家名字: {{ order.mallName }}</p>
          </div>
          <template v-if="[1, 2, 3, 4].includes(order.orderStatus)">
            <button
              style="
                width: 72px;
                height: 27px;
                font-size: 14px;
                cursor: pointer;
                background: #1289ff;
                color: #fff;
                border: none;
                border-radius: 5%;
              "
              @click="putAddress"
            >
              更改地址
            </button>

            <!-- //更改地址弹框 -->
            <el-dialog
              title="更改地址"
              :visible.sync="dialogVisible"
              width="30%"
            >
              <span>
                <el-form
                  ref="formData"
                  labelWidth="105px"
                  :model="formData"
                  :rules="rules"
                >
                  <el-form-item label="地址信息:" prop="address">
                    <el-cascader
                      ref="myCascader"
                      @change="handleChange"
                      style="width: 340px"
                      v-model="formData.address"
                      :options="addressList"
                      clearable
                      placeholder="请选择地址"
                    ></el-cascader>
                  </el-form-item>
                  <!-- 详细地址 -->
                  <el-form-item
                    style="margin-top: 20px"
                    label="详细地址:"
                    prop="consigneeAddress"
                  >
                    <el-input
                      style="width: 340px"
                      type="textarea"
                      v-model="formData.consigneeAddress"
                      placeholder="请输入详细地址信息，如道路、门牌号、小
区、楼栋号、单元等信息"
                    ></el-input>
                  </el-form-item>
                  <!-- 收货人姓名 -->
                  <el-form-item
                    style="margin-top: 20px"
                    label="收货人姓名:"
                    prop="consigneeName"
                  >
                    <el-input
                      style="width: 340px"
                      v-model="formData.consigneeName"
                      placeholder="请输入收货人姓名"
                    ></el-input>
                  </el-form-item>
                  <!-- 手机号码 -->
                  <el-form-item
                    style="margin-top: 20px"
                    label="手机号码"
                    prop="consigneePhone"
                  >
                    <el-input
                      style="width: 340px"
                      placeholder="请输入您的手机号码"
                      v-model="formData.consigneePhone"
                      class="input-with-select"
                    >
                      <el-select
                        size="small"
                        style="width: 140px"
                        v-model="select"
                        slot="prepend"
                        placeholder="请选择"
                      >
                        <el-option label="中国大陆 +86" value="1"></el-option>
                        <el-option label="中国大陆 +87" value="2"></el-option>
                        <el-option label="中国大陆 +88" value="3"></el-option>
                      </el-select>
                    </el-input>
                  </el-form-item>
                  <!-- 复选框 -->
                  <!-- 确认按钮 -->
                  <el-form-item labelWidth="10px" style="margin-top: 20px">
                    <el-button class="btn" type="primary" @click="handleOK"
                      >确认</el-button
                    >
                  </el-form-item>
                </el-form></span
              >
            </el-dialog>
          </template>
          <el-dialog title="投诉" :visible.sync="isShow" width="30%">
            <el-form
              label-width="80px"
              :model="complaintsData"
              :rules="complaintsRules"
              ref="complaintsData"
            >
              <el-form-item label="订单编号" label-width="110px">
                <el-input
                  style="width: 300px"
                  disabled
                  v-model="complaintsData.orderCode"
                ></el-input>
              </el-form-item>
              <el-form-item label="下单时间" label-width="110px">
                <el-input
                  style="width: 300px"
                  disabled
                  v-model="complaintsData.orderTime"
                ></el-input>
              </el-form-item>
              <el-form-item label="订单金额" label-width="110px">
                <el-input
                  style="width: 300px"
                  disabled
                  v-model="complaintsData.orderMoney"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="投诉主题"
                prop="complaintTheme"
                label-width="110px"
              >
                <el-select
                  style="width: 300px"
                  v-model="complaintsData.complaintTheme"
                  placeholder="请选择投诉主题"
                >
                  <el-option label="商品质量" value="商品质量"></el-option>
                  <el-option label="服务态度" value="服务态度"></el-option>
                  <el-option label="物流问题" value="物流问题"></el-option>
                  <el-option label="其他" value="其他"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="投诉内容"
                prop="complaintData"
                label-width="110px"
              >
                <el-input
                  style="width: 300px"
                  type="textarea"
                  v-model="complaintsData.complaintData"
                  placeholder="请输入投诉内容"
                ></el-input>
              </el-form-item>
              <el-form-item label="取证照片" prop="img" label-width="110px">
                <el-upload
                  list-type="picture-card"
                  :action="uploadFileUrl"
                  :on-remove="handleRemove"
                  :limit="1"
                  :file-list="fileList"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :on-preview="handlePictureCardPreview"
                  :on-exceed="handleExceed"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <p>上传图片大小不超过过2M</p>
                <el-dialog :visible.sync="imgShow">
                  <img
                    width="100%"
                    :src="dialogImageUrl"
                    alt=""
                    style="margin: 0 auto"
                  />
                </el-dialog>
              </el-form-item>
              <el-form-item>
                <el-button
                  :disabled="isDisabled"
                  type="primary"
                  @click="submitComplaint"
                  >提交
                </el-button>
                <el-button @click="isShow = false">取消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
          <!-- 添加备注弹框 -->
          <el-dialog
            title="添加备注"
            :visible.sync="dialogVisible_two"
            width="30%"
          >
            <span>
              <el-input
                v-model="order.buyerMessage"
                placeholder="请输入内容"
              ></el-input>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="cancellation">取 消</el-button>
              <el-button type="primary" @click="confirmAdd">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <div class="orderDetails_header_right">
          <div style="width: 46px; margin-left: -300px">
            <img
              src="../../../assets/mallImg/tishi.png"
              alt=""
              style="
                width: 32px;
                height: 32px;
                margin-top: 20px;
                margin-right: 20px;
              "
            />
          </div>
          <div style="width: 216px; margin-left: -700px">
            <span>
              <h2>
                订单状态:
                {{
                  order.orderStatus == 1
                    ? "待付款"
                    : order.orderStatus == 2
                    ? "待审核"
                    : order.orderStatus == 3
                    ? "待发货"
                    : order.orderStatus == 4
                    ? "待收货"
                    : order.orderStatus == 5
                    ? "待评价"
                    : order.orderStatus == 6
                    ? "已完成"
                    : order.orderStatus == 7
                    ? "已驳回"
                    : order.orderStatus == 8
                    ? "已取消"
                    : ""
                }}
              </h2>
            </span>
            <span style="font-size: 18px">
              <p>卖家备注:{{ order.note == "" ? "无" : order.note }}</p>
            </span>
            <span style="font-size: 18px">
              <p>
                买家留言:{{
                  order.buyerMessage == "" ? "无" : order.buyerMessage
                }}
              </p>
            </span>
            <template v-if="order.buyerMessage == ''">
              <button
                style="
                  width: 72px;
                  height: 27px;
                  font-size: 14px;
                  cursor: pointer;
                  background: #1289ff;
                  color: #fff;
                  border: none;
                  border-radius: 5%;
                "
                v-if="[1, 2, 3].includes(order.orderStatus)"
                @click="addNote()"
              >
                添加备注
              </button>
            </template>
          </div>
        </div>
      </div>
      <div class="orderDetails_main">
        <el-table
          style="width: 100%"
          :header-cell-style="headerCellStyle"
          :cell-style="{ 'text-align': 'center' }"
          :data="order.orderDetailesList"
        >
          <el-table-column prop="name" label="商品信息" width="300">
            <template slot-scope="{ row }">
              <img
                :src="row.goodsThumbnail"
                alt=""
                style="width: 80px; height: 80px"
              />
              <p>{{ row.goodsName }}</p>
            </template>
          </el-table-column>
          <el-table-column label="单价" width="200" style="margin-left: 20px">
            <template slot-scope="{ row }">
              <p>{{ row.price / 100 }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="数量"></el-table-column>
          <el-table-column
            prop="amount"
            label="小计"
            width="180"
          ></el-table-column>
        </el-table>
      </div>
      <div class="orderDetails_footer">
        <div class="orderDetails_footer_left">
          <el-link
            :underline="false"
            icon="el-icon-refresh-lef"
            type="primary"
            @click="$router.push('/mall/myOrder')"
          >
            返回我的订单
          </el-link>
          <button
            v-show="complaintFlag"
            @click="handleT()"
            style="
              margin-top: 204px;
              margin-left: 730px;
              width: 92px;
              height: 37px;
              font-size: 14px;
              cursor: pointer;
              background: #1289ff;
              color: #fff;
              border: none;
              border-radius: 5%;
            "
          >
            我要投诉
          </button>
        </div>
        <div class="orderDetails_footer_right">
          <span>
            <p style="color: #626262">
              商品总价:￥{{ order.payableAmount / 100 }}
            </p>
          </span>
          <span>
            <p style="color: #626262">运费:免运费</p>
          </span>
          <span>
            <p style="color: #626262">
              折扣优惠:￥{{ order.discountAmount / 100 }}
            </p>
          </span>
          <span>
            <p style="color: #626262">
              优惠券优惠:￥{{ order.couponDeductionAmount / 100 }}
            </p>
          </span>
          <span>
            <p style="float: left">实付款:</p>
            <p
              style="
                color: #ff6b00;
                font-size: 18px;
                font-weight: 500;
                padding-top: 15px;
              "
            >
              ￥{{ order.paidAmount / 100 }}
            </p>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import areaJson from "@/views/mall/components/area.json"; // eslint-disable-next-line import/no-cycle
import { getMyOrderDetails, updateAddress } from "@/api/myOrder/myOrder";
import { cloud } from "@/framework/utils/request";
import { addComplaint } from "@/api/mallApi/advert";

export default {
  name: "Orderdetails",
  components: {},
  data() {
    return {
      isDisabled: false,
      complaintFlag: false,
      fileList: [],
      dialogImageUrl: "",
      imgShow: false,
      uploadFileUrl: `${this.baseURL()}/sysFileInfo/upload?secretFlag=N&fileBucket=mall`,
      complaintsData: {
        mallCode: "", // 商城编码
        orderCode: "", // 订单编号
        orderTime: "", // 下单时间
        orderMoney: "", // 订单金额
        complaintTheme: "", // 投诉主题
        complaintData: "", // 投诉内容
        img: "", // 取证图片
      },
      complaintsRules: {
        complaintTheme: [
          { required: true, message: "请选择投诉主题", trigger: "blur" },
        ],
        complaintData: [
          { required: true, message: "请输入投诉内容", trigger: "blur" },
        ],
        img: [{ required: true, message: "请上传取证图片", trigger: "blur" }],
      },
      order: {},
      isShow: false,
      dialogVisible: false,
      dialogVisible_two: false,
      select: "1",
      formData: {
        address: [],
      },
      rules: {
        address: [{ required: true, message: "请选择地址", trigger: "change" }],
        consigneeAddress: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        consigneeName: [
          { required: true, message: "请输入收货人姓名", trigger: "blur" },
        ],
        consigneePhone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
      },
      addressList: areaJson,
    };
  },
  created() {
    this.orderCode = this.$route.query.item;
    this.getOrderDetailList();
  },
  mounted() {},

  methods: {
    submitComplaint() {
      this.$refs.complaintsData.validate((valid) => {
        if (!valid) return this.$message.error("请填写完整信息");
        this.isDisabled = true;
        this.complaintsData.orderMoney *= 100;
        addComplaint(this.complaintsData)
          .then((res) => {
            if (res.code === "00000") {
              this.$message.success("提交成功");
              this.isDisabled = false;
              // 重置表单
              this.$refs.complaintsData.resetFields();
              this.complaintsData.img = "";
              this.isShow = false;
            }
          })
          .catch((err) => {
            this.$message.error("提交失败，请修改信息后，重新提交");
            // 重置表单
            this.$refs.complaintsData.resetFields();
            this.isDisabled = false;
          });
      });
    },
    handleRemove(file, fileList) {},
    handleAvatarSuccess(res, file, fileList) {
      this.complaintsData.img = file.response.data.fileUrl;
      this.fileList = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imgShow = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning("当前限制选择 1 张图片，请先删除再上传");
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
    },
    baseURL() {
      return process.env.VUE_APP_BASE_API + cloud.file;
    },
    handleT() {
      this.isShow = true;
    },
    headerCellStyle({ column }) {
      if (column.label === "商品信息") {
        return { background: "#f8f8f8", color: "#2B2B2B", textAlign: "center" };
      } else if (column.label === "单价") {
        return { background: "#f8f8f8", color: "#2B2B2B", textAlign: "center" };
      } else if (column.label === "数量") {
        return { background: "#f8f8f8", color: "#2B2B2B", textAlign: "center" };
      } else if (column.label === "小计") {
        return { background: "#f8f8f8", color: "#2B2B2B", textAlign: "center" };
      }
    },
    // 获取订单详情
    getOrderDetailList() {
      getMyOrderDetails({ orderCode: this.orderCode, id: this.id }).then(
        (res) => {
          this.order = res.data;
          this.formData.id = this.order.id;
          this.complaintsData.orderCode = this.order.orderCode;
          this.complaintsData.orderMoney = (
            this.order.payableAmount / 100
          ).toFixed(2);
          this.complaintsData.orderTime = this.order.orderTime;
          this.complaintFlag = this.order.complaintFlag;
          this.complaintsData.mallCode = this.order.mallCode;
        }
      );
    },
    handleChange(value) {
      const res = this.$refs["myCascader"].getCheckedNodes()[0].pathLabels;
      this.formData.proviceName = res[0];
      this.formData.cityName = res[1];
      this.formData.countyName = res[2];
      this.formData.province = res[0];
      this.formData.city = res[1];
      this.formData.district = res[2];
      this.formData.proviceCode = value[0];
      this.formData.cityCode = value[1];
      this.formData.countyCode = value[2];
    },
    handleOK() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          const that = this;
          that.$dtModal
            .confirm("是否确认修改")
            .then(() => {
              updateAddress(that.formData).then((response) => {
                that.$dtModal.msgSuccess("修改成功");
                that.dialogVisible = false;
                console.log(that.formData, "=11111");
                that.getOrderDetailList();
              });
            })
            .catch(() => {});
        }
      });
    },
    // 添加备注确认提交
    confirmAdd() {
      updateAddress({
        buyerMessage: this.order.buyerMessage,
        id: this.order.id,
      }).then((res) => {
        this.dialogVisible_two = false;
        this.getOrderDetailList();
      });
    },
    cancellation() {
      this.dialogVisible_two = false;
    },
    // 更改地址
    putAddress() {
      this.dialogVisible = true;
      this.formData = {
        ...this.order,
        address: [
          this.order.proviceCode,
          this.order.cityCode,
          this.order.countyCode,
        ],
      };
    },
    // 添加备注
    addNote() {
      this.dialogVisible_two = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.orderDetails {
  width: 1240px;
  height: auto;
  border-radius: 4px;
  background: transparent;
  margin: 0 auto;

  .orderDetails_header {
    width: 100%;
    height: 268px;
    display: flex;
    justify-content: space-around;
    border: 1px solid #f0f0f0;

    .orderDetails_header_left {
      width: 503px;
      height: 100%;
      background: #fbfbfb;
      display: flex;
      flex-direction: column;

      div {
        line-height: 20px;

        p {
          padding: 0px 5px;
        }
      }
    }

    .orderDetails_header_right {
      width: 697px;
      height: 100%;
      background: #fff;
      display: flex;
      justify-content: space-around;

      :nth-child(1) {
        display: flex;
      }
    }
  }

  .orderDetails_main {
    margin-top: 16px;
  }

  .orderDetails_footer {
    width: 100%;
    height: auto;
    margin-top: 21px;
    background: #fbfbfb;
    display: flex;
    justify-content: space-between;

    .orderDetails_footer_left {
      width: 997px;
      height: auto;
      position: relative;

      ::v-deep .el-link {
        position: absolute;
        right: 0px;
        bottom: 30px;
      }
    }

    .orderDetails_footer_right {
      width: 172px;
      height: auto;
      line-height: 40px;
      text-align: right;
      padding-right: 30px;
    }
  }
}

::v-deep .cell {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
